<template>
  <div>
    <BaseModal @onClose="onClose" @onSubmit="onSubmit" :show="show" title="编辑专家">
      <div class="demo-input-suffix">
        <span class="form-input-label">用户ID：</span>
        <el-input v-if="data.userid" disabled v-model="data.userid" placeholder="请输入用户ID"></el-input>
      </div>

      <div class="demo-input-suffix">
        <span class="form-input-label">用户名：</span>
        <el-input v-model="data.username" placeholder="请输入用户名"></el-input>
      </div>

      <div class="demo-input-suffix">
        <span class="form-input-label">手机号：</span>
        <el-input v-model="data.phone" placeholder="请输入手机号"></el-input>
      </div>

      <div class="demo-input-suffix">
        <span class="form-input-label">邮箱：</span>
        <el-input v-model="data.email" placeholder="请输入邮箱"></el-input>
      </div>

      <div class="demo-input-suffix">
        <span class="form-input-label">性别：</span>
        <el-select v-model="data.sex" placeholder="请选择性别">
          <el-option
            v-for="item in sexes"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>


      <div class="demo-input-suffix">
        <span class="form-input-label">用户状态：</span>
        <el-select v-model="data.status" placeholder="请选择用户状态">
          <el-option
            v-for="item in status"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>

      <div class="demo-input-suffix">
        <span class="form-input-label">学校名称：</span>
        <el-autocomplete
          class="inline-input"
          v-model="selectedSchool"
          :fetch-suggestions="querySchool"
          placeholder="请输入学校名称"
          @select="selectSchool"
        ></el-autocomplete>
      </div>

      <div class="demo-input-suffix">
        <span class="form-input-label">职称：</span>
        <el-select @change="onJob_titleChange" v-model="data.job_title" placeholder="请选择职称">
          <el-option
            v-for="item in job_titles"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
    </BaseModal>
  </div>
</template>
<script>
import modalClose from "@/mixins/modalClose";
import CreateFilter from "@/mixins/CreateFilter";
import { expertModel } from "@/api/models";
import {Message} from "element-ui";
export default {
  mixins: [modalClose, CreateFilter],
  components: {},
  data() {
    return {
      schools: [],
      data: {
        userid: null,
        username: null,
        phone: null,
        email: null,
        sex: null,
        status: null,
        school_id: null,
        job_title: null
      }
    };
  },
  props: {
    obj: {
      type: Object,
      default: null
    }
  },
  watch: {
    obj: function(value) {
      if(value) {
        expertModel.item(value.userid, res => {
          this.data = res.data;
          this.selectedSchool = res.data.school_name;
        })
      }else{
        this.data = {}
      }
    }
  },
  mounted() {},
  methods: {
    onClose() {
      this.$emit("onClose");
    },
    getItem() {
      expertModel.item(this.id, res => {
        this.data = res.data;
      });
    },
    onSubmit() {
      let d = this.data;
      if (
        !d.username ||
        !d.phone ||
        !d.email ||
        !d.sex ||
        !d.status ||
        !d.school_id ||
        !d.job_title
      ) {
        return Message.warning("请填完整信息");
      }
      if(d.userid) {
        expertModel.update(d.userid, {
          username: d.username,
          phone: d.phone,
          email: d.email,
          sex: d.sex,
          status: d.status,
          school_id: d.school_id,
          job_title: d.job_title
        }, res => {
          Message.success(res.message)
          this.onClose()
          this.$emit('afterSubmit')
        }, err => {
          Message.error(err.message)
        })
      }else{
        expertModel.create(d, res => {
          Message.success(res.message)
          this.onClose()
          this.$emit('afterSubmit')
        }, err => {
          Message.error(err.message)
        })
      }
    }
  }
};
</script>
<style lang="scss">
</style>